<template>
  <el-container>
    <el-main>
      <el-row>
        <el-col :span="24"><div class="hui" /></el-col>
      </el-row>
      <el-row>
        <el-col
          :span="12"
        ><div class="withdrawal">
          <div class="t">提现统计</div>
          <div>
            <span>本周 本月 全年</span>
            <el-date-picker
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              size="mini"
              end-placeholder="结束日期"
            />
          </div>
          <div ref="withdrawal" class="z" /></div></el-col>
        <el-col :span="12"><div class="earnings"> <div class="t">平台收益渠道统计</div>
          <span>一季度</span>
          <span>二季度</span>
          <span>三季度</span>
          <div ref="earnings" class="z" />
        </div></el-col>
      </el-row>
      <el-row>
        <el-col :span="12"><div class="coupons"><div class="t">订单统计</div>
          <div ref="coupons" class="z" />
        </div></el-col>
        <el-col :span="12"><div class="shop"><div class="t">店铺类型</div>
          <div ref="shop" class="z" /></div></el-col>
      </el-row>
      <el-row>
        <el-col :span="24"><div class="order-form"><div class="t">提现统计</div><div class="tt"><img src="@/icons/svg/对比.png" alt=""></div><div ref="orderform" class="z" /></div></el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import { mapGetters } from 'vuex';
var echarts = require('echarts');

export default {
  name: 'Dashboard',
  data() {
    return {};
  },
  computed: {
    ...mapGetters(['name']),
  },
  mounted() {
    const withdrawal = echarts.init(this.$refs.withdrawal);
    withdrawal.setOption({
      legend: {},
      tooltip: {},
      dataset: {
        source: [
          ['product', '用户提现', '店铺提现'],
          ['一月', 66, 51],
          ['二月', 83, 73],
          ['三月', 86, 65],
          ['四月', 86, 65],
          ['五月', 86, 65],
          ['六月', 86, 65],
          ['七月', 72, 53],
        ],
      },
      xAxis: { type: 'category' },
      yAxis: {},
      // Declare several bar series, each will be mapped
      // to a column of dataset.source by default.
      series: [{ type: 'bar' }, { type: 'bar' }],
    });
    const earnings = echarts.init(this.$refs.earnings);
    earnings.setOption({
      tooltip: {
        trigger: 'item',
      },
      legend: {
        top: '5%',
        left: 'center',
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center',
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '40',
              fontWeight: 'bold',
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 1048, name: '店铺订单' },
            { value: 735, name: '素材' },
            { value: 580, name: '素材抽比' },
            { value: 484, name: '店铺权益' },
            { value: 300, name: '其他' },
          ],
        },
      ],
    });
    const coupons = echarts.init(this.$refs.coupons);
    coupons.setOption({
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: ['平台优惠券', '商家优惠卷'],
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      toolbox: {
        feature: {
          saveAsImage: {},
        },
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: '邮件营销',
          type: 'line',
          stack: '总量',
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          name: '联盟广告',
          type: 'line',
          stack: '总量',
          data: [220, 182, 191, 234, 290, 330, 310],
        },
      ],
    });
    const shop = echarts.init(this.$refs.shop);
    shop.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
          type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          data: ['2012', '2013', '2014', '2015', '2016'],
        },
      ],
      yAxis: [
        {
          type: 'value',
        },
      ],
      series: [

        {
          name: '邮件营销',
          type: 'bar',
          stack: '广告',
          emphasis: {
            focus: 'series',
          },
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          name: '联盟广告',
          type: 'bar',
          stack: '广告',
          emphasis: {
            focus: 'series',
          },
          data: [220, 182, 191, 234, 290, 330, 310],
        },
        {
          name: '视频广告',
          type: 'bar',
          stack: '广告',
          emphasis: {
            focus: 'series',
          },
          data: [150, 232, 201, 154, 190, 330, 410],
        },
      ],
    });
    const orderform = echarts.init(this.$refs.orderform);
    orderform.setOption({
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['10-23周日', '10-24周一', '10-25周二', '10-26周三', '10-27周四', '10-28周五', '10-29周六'],
      },
      yAxis: {
        type: 'value',
      },
      series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        areaStyle: {},
      }],
    });
    window.onresize = function() {
      withdrawal.resize();
      earnings.resize();
      coupons.resize();
      shop.resize();
      orderform.resize();
    };
  },
};
</script>

<style lang="scss" scoped>
.el-container {
  background-color: rgba(240, 242, 245, 1);
  height: 100%;
  width: 100%;

  .t{
        font-size: 20px;
        padding-left: 20px;
        padding-bottom: 20px;
        margin-bottom: 5px;
        border-bottom: 1px solid #e9e9e9;
      }

  .el-main {
    margin: 50px 20px;
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding: 0px;
    overflow: hidden;
    .el-row {
      margin-bottom: 20px;
    }
    .hui {
      width: 100%;
      margin-top: 50px;
      height: 42px;
      background-color: rgba(240, 242, 245, 1);
    }
    .withdrawal {
      width: 100%;
      height: 450px;
      margin-right: 10px;
      // background-color: cornflowerblue;

      span{
        margin-left: 20%;
        margin-right: 25px;
      }
      .z {
        width: 100%;
        height: 85%;
        padding-top: 10px;
      }
    }
    .earnings {
      width: 100%;
      height: 450px;
      margin-left: 20px;
      // background-color: crimson;
      span{
        display: inline-block;
        border: 1px solid black;
        padding: 5px;
      }
      .z {
        width: 100%;
        height: 80%;
        padding-top: 10px;
      }
    }
    .coupons {
      width: 100%;
      height: 450px;
      margin-right: 20px;
      // background-color: blanchedalmond;
      .z {
        width: 100%;
        height: 85%;
        padding-top: 10px;
      }
    }
    .shop {
      width: 100%;
      height: 450px;
      margin-left: 20px;
      // background-color: crimson;
      .z {
        width: 100%;
        height: 85%;
        padding-top: 10px;
      }
    }
    .order-form {
      width: 100%;
      height: 450px;
      // background-color: cyan;
      .tt{
        display: inline-block;
        width: 10%;
        height: 200px;
        margin-left: 70px;
      }
      .z {
        display: inline-block;
        width: 80%;
        height: 80%;
        padding-top: 10px;
      }
    }
  }
}
</style>
